<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/7/18
  Time: 14:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme()
            +"://"
            +request.getServerName()
            + ":"
            +request.getServerPort()
            +request.getContextPath()
            +"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>创建投票</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var deleteObj = function() {
                var $trObj = $(this).parent().parent();
                var name = $trObj.find("td:first").text();
                if (confirm("你确定要删除" + name + "吗？")) {
                    $trObj.remove();
                }
                return false;
            }
            $("#addCandidate").click(function () {
                var candidate = $("#candidate").val().trim();
                $("#candidate").val("");
                var flag = true;
                if(candidate===""){
                    $("span.errorMsg").text("选项不能为空！");
                    return false;
                }else {
                    $("input[name='candidate']").each(function(){
                        if($(this).val()===candidate){
                            $("span.errorMsg").text("选项不能重复！");
                            flag=false;
                            return false;
                        }
                    });
                    if(flag===false){
                        return false;
                    }
                    var $trObj = $("<tr>" + "<td>" + candidate + "</td>" +
                        "<td>" + "<input type=\"hidden\" name=\"candidate\" value=\"" + candidate + "\"/>" + "</td>" +
                        "<td><a href=\"deletecandidate?id=001\">删除</a></td>" +
                        "</tr>");
                    $trObj.appendTo($("#candidateTable"));
                    $trObj.find("a").click(deleteObj);
                }
                $("span.errorMsg").text("");
            });
            $("#sub_btn").click(function () {
                var title = $("#title").val().trim();
                if(title==="") {
                    $("span.errorMsg").text("投票标题不能为空！");
                    return false;
                }
                if($("input:hidden").length<3){
                    $("span.errorMsg").text("至少两个选项！");
                    return false;
                }
                $("#candidate").remove();
            });
            $("a").click(deleteObj);
        });
    </script>
</head>
<body>
<div class="form">
    <form action="voteServlet" method="post">
        <input type="hidden" name="action" value="createVote" />
        <table id="candidateTable">
            <tr>
                <td>输入投票的标题:</td>
                <td>
                <input type="text" placeholder="请输入投票标题" tabindex="1" name="title" id="title"/>
                </td>
            </tr>
            <tr>
                <td>该项目有以下选项:</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>输入你想添加的选项</td>
                <td>
                    <input type="text" placeholder="请输入你想添加的选项" tabindex="1" name="candidate" id="candidate"/>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="addCandidate" type="button" tabindex="1">
                        添加选项
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="创建投票" tabindex="1" id="sub_btn"/>
                </td>
            </tr>
        </table>
    </form>
    <span class="errorMsg"></span>
</div>
</body>
</html>
